<template>
  <div class="listSearchWrap sysLogSearch">
    <a-row :gutter="[8, 16]">
      <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="3" :xxl="3">
        <common-select :options="logTitles" :defaultValue="queryParams.title"
          @changeoption="changeOption('title', $event)" :allow-clear="true" :show-search="true"
          :placeholder="$t('logTitle')" mode="multiple" :maxTagCount="1" style="width: 100%"></common-select>
      </a-col>
      <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="3" :xxl="3">
        <common-select :options="logTypeOption" :defaultValue="queryParams.type"
          @changeoption="changeOption('type', $event)" :allow-clear="true" :show-search="true"
          :placeholder="$t('logType')" :replaceFields="typeReplaceFields" mode="multiple" :maxTagCount="1"
          style="width: 100%"></common-select>
      </a-col>
      <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="3" :xxl="3">
        <common-select :options="userData" :defaultValue="queryParams.createBy"
          @changeoption="changeOption('createBy', $event)" :allow-clear="true" :show-search="true"
          :placeholder="$t('operationUser')" mode="multiple" :maxTagCount="1" style="width: 100%"></common-select>
      </a-col>
      <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="3" :xxl="3">
        <a-input v-model="queryParams.remoteAddress" @keyup.enter="handleSearch" :placeholder="$t('clientIP')"
          :allow-clear="true" />
      </a-col>
      <a-col :xs="24" :sm="24" :md="10" :lg="8" :xl="7" :xxl="7">
        <a-range-picker @change="onRangeChange" :allow-clear="true" :value="defaultDateRange"
          :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
          :disabled-date="disabledDate" :key="timeRefresh" style="width: 100%;" />
        <!-- <a-range-picker
          @change="onRangeChange"
          :allow-clear="true"
          :value="defaultDateRange"
          :showTime="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss"
          :disabled-date="disabledDate"
          style="width: 100%;" /> -->
        <!-- :show-time="{  hideDisabledOptions: true,defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }" -->
      </a-col>
      <a-col :xs="24" :sm="24" :md="14" :lg="16" :xl="5" :xxl="5">
        <div class="searchBtns">
          <a-button-group>
            <auth-button type="primary" :auth="managePerms.log.view" @click="handleSearch">
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </auth-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"></i>
              {{ $t('clear') }}
            </a-button>
          </a-button-group>
          <auth-button :auth="managePerms.log.export" @click="exportSysLog" :loading="exporting">
            <i class="iconfont icon-xiazai"></i>
            {{ $t('export') }}
          </auth-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import sysLogApi from '@/api/modules/system/log'
import userApi from '@/api/modules/system/user'
import AuthButton from '@/components/AuthButton'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import { managePerms } from '@/config/permission/index'
import { downloadBlobFile } from '@/utils/functions'
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  components: {
    AuthButton,
    CommonSelect
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.sysLog.queryParams,
      order: (state) => state.sysLog.order,
      systemLogTypeDictCode: (state) => state.dict.systemLogTypeDictCode
    }),
    // 日期选择的默认值
    defaultDateRange() {
      if (this.queryParams.startTime && this.queryParams.endTime) {
        return [moment(this.queryParams.startTime), moment(this.queryParams.endTime)]
      }
      return []
    },
    logTypeOption() {
      return this.systemLogTypeDictCode.filter((item) => item.value !== 'SEARCH')
    }
  },
  data() {
    return {
      managePerms,
      logTitles: [],
      typeReplaceFields: {
        key: 'value',
        value: 'value',
        title: 'name'
      },
      userData: [],
      exporting: false,
      timeRefresh: true
    }
  },
  watch: {},
  created() {
    this.getTitleOptionsData()
    this.getUserData()
  },
  methods: {
    moment,
    // 获取下拉日志标题数据
    getTitleOptionsData() {
      sysLogApi.getSysLogTitlesData().then((res) => {
        this.logTitles = res.data.map((item) => {
          return {
            id: item.code,
            name: item.name
          }
        })
      })
    },
    // 获取所有用户数据
    getUserData() {
      this.userData = []
      userApi
        .getUserSelect()
        .then((res) => {
          this.userData = res.data.map((item) => {
            return {
              id: item.id,
              name: item.name + '(' + item.account + ')'
            }
          })
        })
        .finally(() => { })
    },
    handleSearch() {
      this.$emit('clickbtn', { type: 'searchData', data: true })
    },
    handleAdd() {
      this.$emit('clickbtn', { type: 'addModule' })
    },
    clearCondition() {
      this.$store.commit('resetSysLogQueryParams')
      this.timeRefresh = !this.timeRefresh
      this.handleSearch()
    },
    onRangeChange(date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.startTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endTime = dateString[1]
    },
    disabledDate(current) {
      return current && current > moment().endOf('day')
    },
    changeOption(key, val) {
      this.queryParams[key] = val
    },
    // 导出
    exportSysLog() {
      this.exporting = true
      // const params = { ...this.queryParams }
      // if (params.startTime) {
      //   params.startTime = params.startTime + ':00'
      // }
      // if (params.endTime) {
      //   params.endTime = params.endTime + ':00'
      // }
      // console.log(this.queryParams,params);

      sysLogApi.exportSysLogData({ ...this.queryParams, order: this.order }).then(res => {
        downloadBlobFile(res, 'system-log.xlsx')
      }).finally(() => {
        this.exporting = false
      })
    }
  }
}
</script>
